<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="delete">删除</button>
    <button class="login">登录</button>

    <div class="modal"></div>
</body>

</html>
<script>
    // 封装  Modal 函数
    function Modal(title = '', msg = '') {

        this.modalkBox = document.createElement('div')

        // 添加 modal 类名
        this.modalkBox.classList.add('modal')

        this.modalkBox.innerHTML = `<div class="header">${title}<i>x</i></div>
        <div class="body">${msg}</div>`
    }

    Modal.prototype.open = function () {
        const modal = document.querySelector('.modal')
        modal && modal.remove()


        //    渲染到  页面上
        document.body.append(this.modalkBox)
        // 删除方法
        this.modalkBox.querySelector('i').addEventListener('click', () => {
            this.modalkBox.remove()
        })
    }


    document.querySelector('.delete').addEventListener('click', function () {
        const del = new Modal('温馨提示', '您没有删除权限')
        del.open()
    })
    document.querySelector('.login').addEventListener('click', function () {
        const login = new Modal('友情提示', '您的余额不足')
        login.open()
    })
</script>